<template>
  <el-container id="content-manage">
    <el-main style="overflow: hidden">
      <Header
        v-if="$store.state.dashboard.isContentwrite"
        :count-pic="countPic"
        :pic-search-options="params"
        :is-batch-header-show="isBatchHeaderShow"
        @changeProductStatus="changeProductStatus"
        @getList="getList"
      ></Header>
      <el-main>
        <List
          ref="channel"
          :dataList="dataList"
          :pic-search-options="params"
          @changeProductStatus="changeProductStatus"
          @getList="getList"
        ></List>
        <el-dialog
          width="0"
          style="z-index: 10"
          :close-on-click-modal="false"
          :show-close="false"
          :modal-append-to-body="false"
        ></el-dialog>
      </el-main>
      <el-footer style="height: auto">
        <slot name="modal-footer"></slot>
      </el-footer>
    </el-main>
  </el-container>
</template>
<script>
import * as userManageApi from "@/api/request/userManageApi";
import Header from "./header";
import List from "./list";

export default {
  components: {
    Header,
    List,
  },
  data() {
    return {
      params: {
        pageIndex: 1,
        pageSize: 10,
      },
      paramss: {
        pageIndex: 1,
        pageSize: 99,
      },
      countPic: 0,
      idsList: [],
      dataList: {},
    };
  },
  mounted() {
    this.getList();
  },
  created() {},
  methods: {
    // 请求列表数据
    async getList() {
      this.$Loading.show();
      let { data, status } = await userManageApi.getList(this.params);
      this.dataList = await this.foreachChannel(data);
      this.$Loading.hide();
    },
    // 遍历渠道
    async foreachChannel(s) {
      let { data } = await userManageApi.getChannelList(this.paramss);
      s.items.forEach((i) => {
        data.items.forEach((k) => {
          if (i.channelId == k.id) {
            i.channelName = k.channelName;
          }
        });
      });
      return s;
    },
    /**
     * 启用或者停用
     */
    async changeProductStatus(id, status) {
      if (!status) {
        var message = "激活";
      } else {
        var message = "禁用";
      }
      this.$confirm("您确认要" + message + "用户吗？", "提示", {
        iconClass: "icon-warning",
        callback: async (action) => {
          if (action === "confirm") {
            if (!status) {
              let { status } = await userManageApi.putOnline(id);
              if (status === 200) {
                this.$notify({
                  customClass: "notify-success", //  notify-success ||  notify-error
                  message: `${message}成功!`,
                  showClose: false,
                  duration: 1000,
                });
                this.getList();
              }
            } else {
              let { status } = await userManageApi.putOfflone(id);
              if (status === 200) {
                this.$notify({
                  customClass: "notify-success", //  notify-success ||  notify-error
                  message: `${message}成功!`,
                  showClose: false,
                  duration: 1000,
                });
                this.getList();
              }
            }
          }
        },
      });
    },
  },
  computed: {
    isBatchHeaderShow() {
      return this.idsList.length > 0 ? true : false;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
// @import "../style/contentDetail";
.el-dialog__wrapper /deep/ .el-dialog {
  margin-top: 70px !important;
}
.uploadImgDialog /deep/ .el-dialog__header {
  padding: 0 20px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-dialog__headerbtn {
    top: 7px;
  }
}
</style>
